import React, {Component} from 'react'
import {Link, Route} from 'react-router-dom'
import MessageDetail from "./message-detail"

export default class Message extends Component {
    state = {
        messages: []
    };

    componentDidMount() {
        //模拟后台异步获取数据
        setTimeout(() => {
            const messages = [
                {id: 1, title: 'message001'},
                {id: 3, title: 'message003'},
                {id: 5, title: 'message005'},
            ];
            this.setState({messages});
        }, 1000);
    }

    showDetail = (id) => {
        this.props.history.push(`/home/message/detail/${id}`);
    };

    showDetail2 = (id) => {
        this.props.history.replace(`/home/message/detail/${id}`);
    };

    back = () => {
        this.props.history.goBack();
    };

    forward = () => {
        this.props.history.goForward();
    };

    reqPage = () => {
        window.location = 'http://www.baidu.com';
    };

    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.messages.map((m, index) => (
                            <li key={index}>
                                <Link to={`/home/message/detail/${m.id}`}>{m.title}</Link>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <button onClick={() => this.showDetail(m.id)}>push查看</button>
                                <button onClick={() => this.showDetail2(m.id)}>replace查看</button>
                            </li>
                        ))
                    }
                </ul>
                <p>
                    <button onClick={this.back}>回退</button>
                    <button onClick={this.forward}>前进</button>
                </p>
                <p>
                    <button onClick={this.reqPage}>页面跳转</button>
                </p>
                <Route path='/home/message/detail/:id' component={MessageDetail}/>
            </div>
        )
    }
}

